<!--<script src="./js/jquery-2.1.1.min.js"></script>-->



<style>

    #picture{
        height: 848px;
    }
</style>

<script src="./js/md5.js"></script>
<!--<iframe style="display: none;" src="./js/html2canvas.js"></iframe>-->
<!--<script src="./js/html2canvas.js"></script>-->
<script src="./js/canvas2Image.js" defer async="true"></script>

<script>
	// var html2canvas = window.top.html2canvas;

	require.config({
        paths: {
            'html2canvas': ['plugs/html2canvas/html2canvas'],
        },
        // shim: {
        //     'vue': ['json']
        // },
    });
    // // 基于 Require 加载测试
    require(['html2canvas'], function (html2canvas) {
        console.log(html2canvas)
        function MainImg(options){
            this.options = {
	            'filename':'file_name',
		        'id':'picture',
		        'classname':'crubR1',
            };
            this.opts =$.extend( true,this.options,options);
            this.init()
        }
        MainImg.prototype = {
             init:function(){
	            this.setListener();
	        },
	          //设置监听事件
	        setListener:function(){
               let that = this
	            $("."+this.opts.classname).on("click", function(){
	                    that.html2Canvas();
	                }
	            )
	        },
            //获取像素密度
	        getPixelRatio:function(context){
	            var backingStore = context.backingStorePixelRatio ||
	                context.webkitBackingStorePixelRatio ||
	                context.mozBackingStorePixelRatio ||
	                context.msBackingStorePixelRatio ||
	                context.oBackingStorePixelRatio ||
	                context.backingStorePixelRatio || 1;
	            return (window.devicePixelRatio || 1) / backingStore;
	        },
	        html2Canvas: function () {
	            // var shareContent = document.getElementById("picture");// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
	            var shareContent = document.getElementById(this.opts.id);// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
	            var width = shareContent.offsetWidth;  // 获取(原生）dom 宽度
	            var height = shareContent.offsetHeight; // 获取(原生）dom 高
	            var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量

	            var canvas = document.createElement('canvas');  //创建canvas 对象
	            var context = canvas.getContext('2d');
	            var scaleBy = this.getPixelRatio(context);  //获取像素密度的方法 (也可以采用自定义缩放比例)

				//倍数
	            scaleBy = 1;
	            //左边距
	            var left = width;
	            canvas.width = width * scaleBy+left;   //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
	            canvas.height = (height + offsetTop) * scaleBy;  // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
	            console.log(canvas)
	            context.scale(scaleBy, scaleBy);

	            var opts = {
	                allowTaint:true,//允许加载跨域的图片
	                tainttest:true, //检测每张图片都已经加载完成
	                scale:scaleBy, // 添加的scale 参数
		            dpi:400,
	                canvas:canvas, //自定义 canvas
	                logging: false, //日志开关，发布的时候记得改成false
	                width:width, //dom 原始宽度
	                height:height, //dom 原始高度
	                windowHeight: document.getElementById(this.opts.id).scrollHeight
	            };
	            console.log(opts)

	            window.pageYoffset = 215;
	            document.documentElement.scrollTop = 215;
	            document.body.scrollTop = 215;

				// window.pageYoffset = 505;
	            // document.documentElement.scrollTop = 505;
	            // document.body.scrollTop = 505;

	            let that = this
	            html2canvas(shareContent, opts).then(function (canvas) {
	                convertCanvasToImg(canvas,that.opts.filename)
	            });
	        },
        }
        let pngA = new MainImg({
	            'classname':'crubR1',
		        'id':'image1',
		        'filename':'委托/声明书',
            });
        let pngB = new MainImg({
	            'classname':'crubR2',
		        'id':'image2',
		        'filename':'阅读协议',
            });

      var main = {
        'filename':'file_name',
        'id':'picture',
        'classname':'crubR1',
        init:function(classname,id,filename){
	        this.classname = classname
            this.id = id
            this.filename = filename
            main.setListener();
        },
        //设置监听事件
        setListener:function(){

            $("."+this.classname).on("click", function(){
                    main.html2Canvas();
                }
            )

        },
        //获取像素密度
        getPixelRatio:function(context){
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        html2Canvas: function () {
            // var shareContent = document.getElementById("picture");// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
            var shareContent = document.getElementById(this.id);// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
            var width = shareContent.offsetWidth;  // 获取(原生）dom 宽度
            var height = shareContent.offsetHeight; // 获取(原生）dom 高
            var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量

            var canvas = document.createElement('canvas');  //创建canvas 对象
            var context = canvas.getContext('2d');
            var scaleBy = main.getPixelRatio(context);  //获取像素密度的方法 (也可以采用自定义缩放比例)

			//倍数
            scaleBy = 1;
            //左边距
            var left = width;
            canvas.width = width * scaleBy+left;   //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
            canvas.height = (height + offsetTop) * scaleBy;  // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
            console.log(canvas)
            context.scale(scaleBy, scaleBy);

            var opts = {
                allowTaint:true,//允许加载跨域的图片
                tainttest:true, //检测每张图片都已经加载完成
                scale:scaleBy, // 添加的scale 参数
	            dpi:400,
                canvas:canvas, //自定义 canvas
                logging: false, //日志开关，发布的时候记得改成false
                width:width, //dom 原始宽度
                height:height, //dom 原始高度
                windowHeight: document.getElementById(this.id).scrollHeight
            };
          console.log(opts)

            window.pageYoffset = 215;
            document.documentElement.scrollTop = 215;
            document.body.scrollTop = 215;

			// window.pageYoffset = 505;
            // document.documentElement.scrollTop = 505;
            // document.body.scrollTop = 505;

            html2canvas(shareContent, opts).then(function (canvas) {
                convertCanvasToImg(canvas,this.filename)
            });
        },
        // convertCanvasToImg:function (canvas) {
        //     // canvas base64 转 blob
        //     // var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
        //     var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 1))
        //     // blob转URL对象
        //     myUrl = URL.createObjectURL(myBlob)
        //     // 创建a标签，下载图片
        //     downImg(myUrl)
        // },

    };
      // let pngA = new main.init('crubR1','image1','委托/声明书');
      // let pngB = new main.init('crubR2','image2','阅读协议');
    });

    //转换图片格式
    function convertCanvasToImg(canvas,filename) {
        // canvas base64 转 blob
        // var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))

        var _fixType = function(type) {
            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        };
        var type = 'png';
        var fixType = _fixType(type);

        var myBlob = dataURLtoBlob(canvas.toDataURL(fixType))
        // var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 1))
        // blob转URL对象
        myUrl = URL.createObjectURL(myBlob)
        // 创建a标签，下载图片
        downImg(myUrl,filename)
    }

    //base64 转 blob
    function dataURLtoBlob(dataurl) {
        // console.log(dataurl)
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    //下载图片 filename是图片名称
    function downImg(url,filename) {
        // 创建a标签 并设置其相关属性，最后触发其点击事件
        let a = document.createElement("a")
        let clickEvent = document.createEvent("MouseEvents");
        a.setAttribute("href", url)
        a.setAttribute("download", filename)
        a.setAttribute("target", '_blank')
        clickEvent.initEvent('click', true, true)
        a.dispatchEvent(clickEvent);
    }




    if ($("#file_name").length>0){
        file_name = $("#file_name").val() == '' ? 'file_name':$("#file_name").val();
    }


</script>